<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ws连接信息</title>
    <style>
        /* 设置容器的样式 */
        #message-container {
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            overflow-y: auto; /* 允许垂直滚动 */
            padding: 10px;
            background-color: #f9f9f9;
        }

        /* 设置消息的样式 */
        .message {
            margin-bottom: 10px;
            padding: 5px;
            background-color: #e0e0e0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div>
        <h1>WebSocket连接信息</h1>
        <p id="ws-address">WebSocket连接地址: {{wsUrl}}</p>
        <p id="ws-status">WebSocket消息数量: 0</p>
        <div id="message-container">
            <!-- 消息将动态插入到这里 -->
        </div>
    </div>

    <script>
        // 获取元素
        const wsAddressElement = document.getElementById('ws-address');
        const messageContainer = document.getElementById('message-container');
        const wsStatusElement = document.getElementById('ws-status');
        let wsStatus = 0; // 初始化消息数量

        // 从服务器获取WebSocket地址
        function fetchWsAddress() {
            fetch('/ws-address')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络错误或文件未找到');
                    }
                    return response.text();
                })
                .then(address => {
                    wsAddressElement.textContent = `WebSocket连接地址: ${address}`;
                })
                .catch(error => console.error('获取WebSocket地址错误:', error));
        }

        // 从文件获取消息
        function fetchMessages() {
            fetch('/data.txt')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络错误或文件未找到');
                    }
                    return response.text();
                })
                .then(data => {
                    const messages = data.trim().split('\n'); // 按行分割消息
                    messageContainer.innerHTML = ''; // 清空容器
                    wsStatus = 0; // 重置消息数量
                    messages.forEach(receiveMessage); // 逐行处理
                })
                .catch(error => console.error('获取消息错误:', error));
        }

        // 创建新的消息元素
        function receiveMessage(message) {
            if (!message) return; // 忽略空行

            // 创建新的消息元素
            const messageElement = document.createElement('div');
            messageElement.classList.add('message');
            messageElement.textContent = message;

            // 将消息添加到容器中
            messageContainer.appendChild(messageElement);
            wsStatus++; // 增加消息数量
            updateWsStatus(); // 更新显示的消息数量

            // 自动滚动到底部
            messageContainer.scrollTop = messageContainer.scrollHeight;
        }

        // 更新WebSocket消息状态显示
        function updateWsStatus() {
            wsStatusElement.textContent = `WebSocket消息数量: ${wsStatus}`;
        }

        // 定时从文件读取消息
        setInterval(fetchMessages, 2000); // 每2秒从文件读取一次

        // 定时获取WebSocket地址
        setInterval(fetchWsAddress, 2000); // 每2秒获取一次WebSocket地址
    </script>
</body>
</html>
